/**
 * 首页
 */
<template>
  <div class="main">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card1">
      <div slot="header" class="clearfix">
        <span>昨日关键指标</span>
      </div>
      <div class="text item">
        <span>新增用户数</span>
        <span class="spanNum">0</span>
        <span>日：上升20%</span>
        <span>周：上升20%</span>
        <span>月：上升20%</span>
      </div>
      <div class="text item">
        <span>活跃用户数</span>
        <span class="spanNum">0</span>
        <span>日：上升20%</span>
        <span>周：上升20%</span>
        <span>月：上升20%</span>
      </div>
      <div class="text item">
        <span>回流用户数</span>
        <span class="spanNum">0</span>
        <span>日：上升20%</span>
        <span>周：上升20%</span>
        <span>月：上升20%</span>
      </div>
      <div class="text item">
        <span>流失用户数</span>
        <span class="spanNum">0</span>
        <span>日：上升20%</span>
        <span>周：上升20%</span>
        <span>月：上升20%</span>
      </div>
      <div class="text item last">
        <span>累计用户数</span>
        <span class="spanNum">0</span>
        <span>日：上升20%</span>
        <span>周：上升20%</span>
        <span>月：上升20%</span>
      </div>
    </el-card>
    <el-card class="box-card2">
      <div slot="header" class="clearfix">
        <el-select class="select1" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div class="date">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>

        <el-radio-group v-model="tabPosition">
          <el-radio-button label="top">按时</el-radio-button>
          <el-radio-button label="right">按日</el-radio-button>
          <el-radio-button label="bottom">按月</el-radio-button>
          <el-radio-button label="left">按年</el-radio-button>
        </el-radio-group>


      </div>
      <div id="myChart" style="width: 80%;height:400px;">
      </div>
    </el-card>
    <el-card class="box-card3">
      <div slot="header" class="clearfix">
        <span>运营参谋</span>
      </div>
      <el-radio-group v-model="data">
        <el-radio-button label="top">实时数据</el-radio-button>
        <el-radio-button label="right">经营情况</el-radio-button>
      </el-radio-group>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="服务质量" name="first">
          <div class=""></div>
          <div class=""></div>
          <div class=""></div>
        </el-tab-pane>
        <el-tab-pane label="SIM卡检测" name="second">SIM卡检测</el-tab-pane>
        <el-tab-pane label="流量预测" name="third">流量预测</el-tab-pane>
      </el-tabs>

    </el-card>


  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
//import * as echarts from 'echarts';
import echarts from 'echarts'
export default {
  data() {
    return {
      activeName: 'first',
      tabPosition:'left',
      data:'top',

      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        deptId: '',
        deptName: '',
        deptNo: '',
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
        deptName: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        deptNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },


       options: [{
          value: '选项1',
          label: '新增用户数'
        }, {
          value: '选项2',
          label: '活跃用户数'
        }, {
          value: '选项3',
          label: '回流用户数'
        }, {
          value: '选项4',
          label: '流失用户数'
        }, {
          value: '选项5',
          label: '累计用户数'
        }],
        value: '',


         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''
    }
  },
    mounted() {
      var chartDom = document.getElementById('myChart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis:{
          type:'category',
          data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        },
        yAxis:{
          type:'value'
        },
        series:[
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      };
      option && myChart.setOption(option);
		},
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {

    handleClick(tab, event) {
        console.log(tab, event);
    },

    // 获取公司列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 5,
        data: [
          {
            addUser: null,
            editUser: null,
            addTime: 1521062371000,
            editTime: 1526700200000,
            deptId: 2,
            deptName: 'XX分公司',
            deptNo: '1',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521063247000,
            editTime: 1526652291000,
            deptId: 3,
            deptName: '上海测试',
            deptNo: '02',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526349555000,
            editTime: 1526349565000,
            deptId: 12,
            deptName: '1',
            deptNo: '11',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526373178000,
            editTime: 1526373178000,
            deptId: 13,
            deptName: '5',
            deptNo: '5',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526453107000,
            editTime: 1526453107000,
            deptId: 17,
            deptName: 'v',
            deptNo: 'v',
            parentId: 1
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 模拟数据结束

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // deptList(parameter)
      //   .then(res => {
      //     this.loading = false
      //     if (res.success == false) {
      //       this.$message({
      //         type: 'info',
      //         message: res.msg
      //       })
      //     } else {
      //       this.listData = res.data
      //       // 分页赋值
      //       this.pageparm.currentPage = this.formInline.page
      //       this.pageparm.pageSize = this.formInline.limit
      //       this.pageparm.total = res.count
      //     }
      //   })
      //   .catch(err => {
      //     this.loading = false
      //     this.$message.error('菜单加载失败，请稍后再试！')
      //   })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.deptId = row.deptId
        this.editForm.deptName = row.deptName
        this.editForm.deptNo = row.deptNo
      } else {
        this.title = '添加'
        this.editForm.deptId = ''
        this.editForm.deptName = ''
        this.editForm.deptNo = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '公司保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('公司保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除公司
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.deptId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '公司已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('公司删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>

<style lang='scss' scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}


.main{
  .box-card1 {
    width: 95%;
    margin-top: 20px;
    margin-left: 40px ;

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }

    .item {
      margin-bottom: 18px;
      display: inline-block;
      width: 19.5%;
      border-right: 1px solid rgb(167, 167, 167);
      text-align: center;

      span{
        display: block;
        font-size: 14px;
        color: rgb(167, 167, 167);
      }
      .spanNum{
        font-size: 20px;
        margin-top: 4px;
        margin-bottom: 2px;
        color: rgb(0, 0, 0);
      }
    }
    .last{
      border-right: 0px;
    }
  }


  .box-card2 {
    width: 95%;
    margin-top: 20px;
    margin-left: 40px ;

    .select1{
      width: 150px;
    }
    .date{
      display: inline-block;
      margin-left: 20%;
      margin-right: 20%;
    }
    #myChart{
      text-align: center;
    }
  }

  .box-card3{
    width: 95%;
    margin-top: 20px;
    margin-left: 40px ;
    text-align: center;

    .clearfix{
      text-align: left;
    }
  }
}
</style>

 
 